<!-- 本页样式 -->

<style scoped>
.del-dialog-cnt {
    font-size: 16px;
    text-align: center;
}
</style>
<!-- 页面布局-->
<template>
<div class="table">
    <!-- 标题导航栏 -->
    <div class="title-box crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>
                <i class="el-icon-tickets"></i>基础数据管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>卡商管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!-- 主体区 -->
    <div class="container">
        <!-- 查询条件 -->
        <div class="search-box">
            <div class="search-item-box">
                <table>
                    <tr>
                        <td>
                            <i class="el-icon-search"></i>
                        </td>
                        <td class="search_td">
                            <el-select v-model="parampters.isp" clearable placeholder="运营商">
                                <el-option v-for="item in dicts.isp" :key="item.code" :label="item.name" :value="item.code">
                                </el-option>
                            </el-select>
                        </td>
                        <td class="search_td">
                            <el-input v-model="parampters.spName" clearable placeholder="卡商名称" class="handle-input mr10" style="width:200px;"></el-input>
                        </td>
                        <td class="search_td">
                            <el-input v-model="parampters.spNo" clearable placeholder="卡商代码" class="handle-input mr10" style="width:200px;"></el-input>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="search-button-box">
                <el-button type="primary" size="small" icon="search" @click="searchLoad">查询</el-button>
                <el-button type icon="add" size="small" @click="toAdd">新增</el-button>
                <el-button type size="small" icon="el-icon-download" @click="toExportExcel">导出&nbsp;Excel</el-button>
            </div>
        </div>
        <!-- 查询条件END -->
        <!-- 数据列表 -->
        <div class="grid-data-box">
            <el-table v-loading="tableLoading" :max-height="tableListHeight" :data="tableData" border :cell-class-name="changeColumnClass" :header-cell-style="{background:'#F3F3F3',color:'#606266'}" show-overflow-tooltip style="width: 100%" ref="multipleTable" @row-dblclick="clickToView">
                <el-table-column type="index" label="序号" width="50" show-overflow-tooltip></el-table-column>
                <el-table-column prop="spName" label="卡商名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="spNo" label="卡商代码" width="300" show-overflow-tooltip></el-table-column>
                <el-table-column prop="isp" label="运营商" width="180" :formatter="formatter" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="200" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button size="mini" @click="toUpd(scope.row)" type="primary">修改</el-button>
                        <el-button size="mini" type="danger" @click="toDel(scope.row)" style="margin-left:5px">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 数据列表END -->
        <!-- 翻页导航条 -->
        <div class="navigate-box">
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" :total="parampters.totalCount" @size-change="handleSizeChange" :current-page.sync="parampters.pageIndex" :page-sizes="[20, 50, 100, 200]" :page-size="parampters.pageRows" layout="total, sizes, prev, pager, next"></el-pagination>
            </div>
        </div>
        <!-- 翻页导航条END -->
    </div>
    <!-- 主体区END -->
</div>
</template>

<script>
import spupd from "./sp_upd.vue"
export default {
    data() {
        return {
            // 筛选条件
            parampters: {
                //查询参数
                loginsid: "", //登录会话SID
                pageRows: 20, //每页行数
                pageIndex: 1, //当前页
                pageCount: 0, //总页数
                totalCount: 0, //总记录数
                isp: "", //运营商
                spName: "", //卡商名称
                spNo: "", //卡商代码
            },
            // 查询出的表格数据
            tableLoading: true,
            tableData: [],
            //confirm提示信息弹框
            confirmBox: null,
            //所选记录id
            selectedId: "",
            //事物类型
            actType: "list",
            //字典集
            dicts: {}
        };
    },
    // 进入页面加载数据
    activated() {
        this.$set(this.parampters, "isp", "");
        this.$set(this.parampters, "spName", "");
        this.$set(this.parampters, "spNo", "");
        this.handleInitLoad();
    },
    methods: {

        /**
         * 组件初始化加载
         */
        handleInitLoad() {
            this.initSelectOptoins();
            this.searchLoad();
        },

        /**
         * 初始加载字典选项
         */
        initSelectOptoins() {
            this.loadSelectOptoins("isp", null);
        },

        /**
         * 通用定义:下拉字典
         *  @augments dictKind 字典类型
         */
        loadSelectOptoins(dictKind, params) {
            let url = "/rps/dictionary/";
            this.$axios
                .get(url, {
                    params: {
                        type: dictKind
                    },
                    headers: {
                        operator: this.$util.getLoginer().userid,
                        withCredentials: true
                    }
                })
                .then(res => {
                    let data = res.data;
                    if (data.success) {
                        this.$set(this.dicts, dictKind, data.data.list);
                    } else {
                        console.log(data.message);
                        // this.$error( "查询失败" + data.message );
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },

        changeColumnClass(data) {
            if (data.columnIndex == 1 || data.columnIndex == 2) {
                return "tabcolumn_left";
            }
        },

        /**
         * @augments  row 行所在的数据
         * 表格数据列 内容字典转换
         */
        formatter(row, column) {
            if (column.property == "isp") {
                return this.$dicts.transDict(this.dicts.isp, "code", "name", row.isp);
            }
        },

        /**
         * @augments val 页码
         * 切换页码操作
         */
        handleCurrentChange(val) {
            this.parampters.pageIndex = val;
            // 重新获取当前页码的数据
            this.searchLoad();
        },

        /**
         * @augments val 每页显示条数
         * 每页显示条数修改
         */
        handleSizeChange(val) {
            // 修改每页显示条数
            this.parampters.pageRows = val;
            // 重新获取数据
            this.searchLoad();
        },

        /**
         * 条件筛选查询,加载数据
         */
        searchLoad() {
            this.parampters = this.$util.trimObjStr(this.parampters);
            this.parampters.loginsid = this.$util.getLoginer().sessionId;
            this.tableLoading = true;
            this.$axios
                .get("/rps/sp/?" + new Date().getTime(), {
                    params: this.parampters,
                    headers: {
                        operator: this.$util.getLoginer().userid,
                        withCredentials: true
                    }
                })
                .then(res => {
                    let data = res.data;
                    if (data.success) {
                        this.tableData = data.data.list;
                        this.tableLoading = false;
                        this.parampters.pageIndex = data.data.pageNum != undefined ? parseInt(data.data.pageNum) : 0;
                        this.parampters.pageCount = data.data.totalPage != undefined ? parseInt(data.data.totalPage) : 0;
                        this.parampters.totalCount = data.data.count != undefined ? parseInt(data.data.count) : 0;
                    } else {
                        this.tableLoading = false;
                        this.$error("查询失败" + data.message);
                    }
                })
                .catch(err => {
                    this.tableLoading = false;
                    console.log(err);
                });
        },

        /**
         * 新增记录信息
         */
        toAdd() {
            //页面参数
            var pageParam = {
                loginInfo: this.$util.getLoginer(),
                actType: "add",
                seleid: "-1"
            };
            let commDialog = this.$dialog.commDialog(
                "添加卡商信息",
                spupd,
                pageParam,
                "700px",
                "440px"
            );
            commDialog.exec.then(data => {
                this.searchLoad();
            });
        },

        /**
         * 修改记录信息
         * @augments index 编辑数据所在的行索引
         * @augments row 编辑数据行的数据
         */
        toUpd(row) {
            this.selectedId = row.spId;
            //页面参数
            var pageParam = {
                actType: "upd",
                seleid: this.selectedId
            };
            let commDialog = this.$dialog.commDialog(
                "编辑卡商信息",
                spupd,
                pageParam,
                "700px",
                "440px"
            );
            commDialog.exec.then(resp => {
                if (resp.type == "ok") {
                    this.searchLoad();
                } else if (resp.type == "cancel") {}
            });
        },

        //
        clickToView(rowData, column, event) {
            this.toView(rowData);
        },

        /**
         * 查看记录信息
         * @augments row 编辑数据行的数据
         * @augments ev
         */
        toView(row) {
            this.selectedId = row.spId;
            //页面参数
            var pageParam = {
                actType: "view",
                seleid: this.selectedId
            };
            let commDialog = this.$dialog.commDialog(
                "查看卡商信息",
                spupd,
                pageParam,
                "700px",
                "440px"
            );
            commDialog.exec.then(data => {});
        },

        /**
         * 删除记录信息
         * @augments index 所在表格行的索引
         * @augments row 所在表格行的所有数据对象
         */
        toDel(row) {
            this.selectedId = row.spId;
            this.confirmBox = this.$dialog.confirm("确定删除所选记录吗？");
            this.confirmBox.exec.then(btnName => {
                if (btnName == "ok") {
                    // 确定删除数据操作
                    this.$axios
                        .delete("/rps/sp/" + this.selectedId + "/", {}, {
                            headers: {
                                operator: this.$util.getLoginer().userid,
                                withCredentials: true
                            }
                        })
                        .then(res => {
                            let data = res.data;
                            if (data.success) {
                                this.$dialog.close(this.confirmBox.vm);
                                this.$message.success("删除成功");
                                this.searchLoad();
                            } else {
                                this.$dialog.close(this.confirmBox.vm);
                                this.$error(data.message);
                            }
                        }).catch(err => {
                            this.$dialog.close(this.confirmBox.vm); // 取消删除数据操作
                        });
                } else {
                    this.$dialog.close(this.confirmBox.vm); // 取消删除数据操作
                }
            });
        },
        /**
         * 导出 Excel
         */
        toExportExcel() {
            this.$axios
                .get("/rps/sp/export/", {
                    params: this.parampters,
                    headers: {
                        operator: this.$util.getLoginer().userid,
                        withCredentials: true
                    }
                })
                .then(res => {
                    let data = res.data;
                    // 关闭提交表单的loading
                    if (data.success) {
                        let downloadUrl = data.data;
                        let n = downloadUrl.split("/");
                        var link = document.createElement('a');
                        //设置下载的文件名
                        link.download = n[n.length - 1];
                        link.style.display = 'none';
                        //设置下载路径
                        link.href = downloadUrl;
                        //浏览器兼容，禁止打开新的页面
                        link.target = "_self";
                        //触发点击
                        document.body.appendChild(link);
                        link.click();
                        //移除节点
                        document.body.removeChild(link);
                    } else {
                        this.$error(data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
    }
};
</script>
